<template>
	<view class="container">
		<view class="nav">
			<view class="content">
				<view class="user">
					<image :src="studioDetail.user.avatar?studioDetail.user.avatar:url+'icon-15.png'" mode=""></image>
					<view class="user_list" @tap="studioDetail.isDetails?authentication():''">
						<image v-for="(item,index) in studioDetail.areaPic" :key="item+index" :src="item" mode="aspectFit"></image>
					</view>
				</view>
				<view class="identity" @click="toIndexDetails">
					<view class="identity_detail">
						<view class="name">{{studioDetail.user&&studioDetail.user.nickName}}</view>
						<image :src="url+(studioDetail.studio.sex==1?'icon-35.png':'icon-35.png')" mode=""></image>
						<text>{{studioDetail.identity==1?'店长':studioDetail.identity==2?'店员':'陪宠师'}}</text>
					</view>
					<view class="identity_studio"><view>{{studioDetail.studio.name}}</view>	<uni-icons type="right" :color="'#5C5E5E'" :size="13" ></uni-icons></view>
				</view>
				<view class="jianjie" v-if="studioDetail.user.petsitterIntroduce">
					<image :src="url+'icon-94.png'" mode=""></image>
					<text>{{studioDetail.user.petsitterIntroduce}}</text>
				</view>
				<view class="img_list" v-if="studioDetail.picJson" @tap="toAlbum">
					<image v-for="item in studioDetail.picJson" :key="item" :src="item.picUrl" mode="heightFix"></image>
				</view>
			</view>
		</view>
		<view class="team">
			<view class="team_title">
				<view class="name">提供服务<text>({{getStudioService.list.length}})</text></view>
			</view>
			<scroll-view class="team_scroll" scroll-x="true">
				<view class="team_item" v-for="item in getStudioService.list" :key="item.id" @tap="getStudioService.toPaymentOrder(item.id)">
					<view class="team_item_content">
						<image :src="item.thumPic" mode=""></image>
						<view>
							<view class="name xjs-line-one">{{ item.name }}</view>
							<view class="describe">¥{{ item.minPrice }}起</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="dailyService team">
			<view class="team_title">
				<view class="name">服务日常<text>({{ teamList.serviceDailyCount }})</text>
				</view>
				<view class="seeTo" v-if="Number(teamList.serviceDailyCount)" @tap="dailyService.toDailyService">
					<text>查看全部</text>
					<uni-icons type="right" :color="'#5C5E5E'" :size="13"></uni-icons>
				</view>
			</view>
			<view class="dailyService_swiper" v-if="dailyService.list.length!=0">
				<swiper class="dailyService_swiper_content" :current="dailyService.dailyServiceCurrent" next-margin="336rpx" circular :indicator-dots='false' @change='dailyService.changeDailyService'>
					<swiper-item v-for="item in dailyService.list" :key="item.id" @tap="dailyService.toDailyServiceDetail(item.id,item.petsitterNickName)">
						<view class="swiper-item">
							<image :src="item.coverPic" mode=""></image>
							<view class="xjs-line-two">
								{{ item.content }}
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="dots">
					<view v-for="(item,index) in dailyService.list" :class="dailyService.dailyServiceCurrent==index?'active':''" :key="index+'dots'"></view>
				</view>
			</view>
			<loadMore v-else :status="'empty'" />
		</view>
		<view class="serviceEvaluation team">
			<view class="team_title">
				<view class="name">
					服务评价
					<text>({{ evaluate.total }})</text>
				</view>
				<view class="seeTo" @tap="evaluate.toEvaluate" v-if="evaluate.list.length!=0">
					<text>查看全部</text>
					<uni-icons type="right" :color="'#5C5E5E'" :size="13"></uni-icons>
				</view>
			</view>
			<evaluateItem v-if="evaluate.list.length!=0" :list="evaluate.list"></evaluateItem>
			<loadMore v-else :status="'empty'" :text="'暂时还没有服务评价'" />
		</view>
		<view class="footer">
			<view v-if="bankSwitch" @click="onlineConsultation">在线咨询</view>
			<view @tap="scrollFu">预约下单</view>
		</view>
		<!-- <image class="share" :src="url+'icon-87.png'" mode=""></image> -->
	</view>
</template>

<script lang="ts" setup>
import { ref, nextTick,reactive } from 'vue'
import api from '@/api'
import { useUserStoreToRefs } from '@/store/useUserStore'
import { onShow, onLoad ,onShareAppMessage, onShareTimeline} from '@dcloudio/uni-app'
import evaluateItem from '../components/evaluate-item/index.vue'
import { useConfigStoreToRefs } from '@/store/useConfigStore'
const url = ref<string>('https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/')
const { shareRefereeId,userInfo } = useUserStoreToRefs()
const { bankSwitch } = useConfigStoreToRefs()
import configs from '@/config'
// 分享 
onShareAppMessage(() => {
	let cans = `${configs.api}/?xcx=xjs&shareRefereeId=${userInfo.value.id || ''}&text=wx&data1=${userId.value || ''}&data2=${studioId.value}&type=4`
	return {
		title: "",
		path: `/pages/shareRefereeId/index?q=${encodeURIComponent(cans)}`,
		imageUrl: ""
	}
})
onShareTimeline(() => {
	let cans = `${configs.api}/?xcx=xjs&shareRefereeId=${userInfo.value.id || ''}&text=wx&data1=${userId.value || ''}&data2=${studioId.value}&type=4`
	return {
		title: "",
		path: `/pages/shareRefereeId/index?q=${encodeURIComponent(cans)}`,
		imageUrl: ""
	}
})


onLoad(async (e) => {
	studioId.value = e.studioId
	userId.value = e.userId
	await getDetails()
})

const studioId = ref<number>(0) //工作室id
const userId = ref<number>(0) //个人id
const studioDetail = ref<studioDetailType>({
	name: '',
	introduce: '',
	avatar: '',
	realDistance: '',
	province: '',
	city: '',
	area: '',
	address: '',
	user:{},
	studio:{},
	areaPic:[],
	identity:'',
	picJson:[],
	isDetails:0
}) // 工作室详情数据
//获取工作室详情
const getDetails = async () => {
	const res: any = await api({
		method: 'get',
		url: `/mall/studio/petsitter-team/getUserDetail`,
		data: {
			studioId: studioId.value,
			userId:userId.value
		}
	})
	if (res) {
		studioDetail.value = res.data
		if(res.data.user.petRaisingPic){
			let arr = JSON.parse(res.data.user.petRaisingPic)
			studioDetail.value.picJson = arr.filter((item,index)=>{return index<4&&item})
		}
		
		await getStudioService.getList()
		await evaluate.getList()
		await teamList.getAllCount()
		await dailyService.getList()
		await homePageConfigList()
	}
}

//获取工作室配置
const homePageConfigList = async ()=>{
	const res: any = await api({
		method: 'get',
		url: `/mall/content/home-page-config/list`,
	})
	let arr = res.data.filter(item=>item.type==5)
	studioDetail.value.isDetails = arr[0].isDetails
	studioDetail.value.areaPic = arr[0].areaPic.split(',')
}

//跳转工作室详情
const toIndexDetails = ()=>{
	uni.navigateTo({
		url: `/pages/studio/indexDetails/index?studioId=${studioId.value}&userId=${userId.value}`
	})
}
//跳转认证页面
const authentication = () =>{
	uni.navigateTo({
		url:'/pages/studio/certificationDetails/index?score=5'
	})
}
//跳转相册
const toAlbum = ()=>{
	uni.navigateTo({
		url:`/pages/studio/album/index?studioId=${studioId.value}&userId=${userId.value}`
	})
}

//获取服务列表
const getStudioService = reactive<any>({
	list: [],
	//去下单
	toPaymentOrder: (id : string) => {
		uni.navigateTo({
			url: `/pages/serviceDetails/details/index?studioGoodsId=${id}${userId.value?'&userId='+userId.value:''}&studioId=${studioId.value}`
		})
	},
	getList: async () => {
		const res: any = await api({
			method: 'get',
			url: `/mall/goods/goods/list`,
			data:{userId:userId.value}
		});
		if (res) {
			getStudioService.list = res.data
		}
	}
});

//预约下单，回到顶部
const scrollFu = ()=>{
	uni.pageScrollTo({
		scrollTop:0
	})
}
//获取数量
const teamList = reactive<any>({
	teamCount:'',
	serviceDailyCount:'',
	getAllCount: async()=>{
		const res: any = await api({
			method: 'get',
			url: `/mall/studio/petsitter-team/getAllCount`,
			data: {
				studioId: studioId.value,
				userId:userId.value
			}
		})
		if (res) {
			teamList.teamCount = res.data.teamCount
			teamList.serviceDailyCount = res.data.serviceDailyCount
		}
	}
})

//获取服务日常
const dailyService = reactive<any>({
	list:[],//服务日常数据列表
	dailyServiceCurrent:0,
	getList:async()=>{
		const res: any = await api({
			method: 'get',
			url: `/mall/order-service-daily/homePage`,
			data: {
				studioId: studioId.value,
				userId:userId.value
			}
		})
		if (res) {
			dailyService.list = res.data
			dailyService.list.forEach(item=>{
				item.coverPic = item.coverPic.split(',')[0]
			})
		}
	},
	//去日常详情
	toDailyServiceDetail:(id: string,petsitterNickName:string) => {
		uni.navigateTo({
			url: '/pages/studio/dailyServiceDetail/index?id=' + id + '&petsitterNickName='+petsitterNickName
		})
	},
	changeDailyService:(e:any) =>{
		dailyService.dailyServiceCurrent = e.detail.current
	},
	toDailyService:()=>{//跳转服务日常列表
		uni.navigateTo({
			url: '/pages/studio/dailyService/index?studioGoodsId=' + studioId.value + '&userId=' + userId.value
		})
	},
})
//返回工作室主页
const goUrl = (id: string) => {
	uni.redirectTo({
		url: '/pages/studio/index/index?id=' + studioId.value
	})
}
//获取评论列表
const evaluate = reactive<any>({
	list:[],//评论列表
	total:0,//评论总数量
	getList: async()=>{
		const res: any = await api({
			method: 'get',
			url: `/mall/order/assess/page`,
			data: {
				page: 1,
				limit: 6,
				studioId: studioId.value,
				petsitterUserId:userId.value
			}
		})
		if (res) {
			evaluate.list = res.data.records
			evaluate.total = res.data.total
		}
	},
	toEvaluate:()=>{//跳转评论列表
		uni.navigateTo({
			url: '/pages/studio/serviceEvaluation/index?studioId=' + studioId.value + '&userId=' + userId.value
		})
	}
})
//跳转在线咨询
const onlineConsultation = () =>{
	if(!userInfo.value){
		uni.showToast({
			icon: 'none',
			title: '登录后即可咨询'
		});
	}else{
		uni.navigateTo({
			url: `/pages/im/message/index?id=${userId.value}&username=${studioDetail.value.user.nickName}&avatar=${studioDetail.value.user.avatar}`
		})		
	}
	
}

//工作室详情数据
interface studioDetailType {
	name: string
	introduce: string
	avatar: string
	realDistance: string
	province: string
	city: string
	area: string
	address: string
	user:any
	studio:any
	areaPic:any
	identity:string
	picJson:any
	isDetails:number
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	line-height: 1;
	padding-bottom: calc(170rpx + var(--safe-area-bottom));
	background: #F9F6F6;
}
.nav {
	width: 100%;
	padding: 88rpx 32rpx 0;
	box-sizing: border-box;
	background:url(https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/bg.png) no-repeat;
	background-size: 100% 160rpx;
	.content {
		width: 100%;
		border-radius: 24rpx;
		box-sizing: border-box;
		padding: 48rpx 32rpx 24rpx;
		background-color: #fff;
		.user{
			width: 100%;
			box-sizing: border-box;
			@include flex(flex-end,space-between); 
			image{
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin-top: -88rpx;
			}
			.user_list{
				@include flex(center);
				image{
					// width: 54px;
					height: 38rpx;
					border-radius: 32rpx;
					margin:0 8rpx 0 0;
					&:last-child{
						margin: 0; 
					}
				}
			}
		}
		.identity{
			margin-top: 24rpx;
			>view{
				@include flex(center);
			}
			.identity_detail{
				.name{
					color: #1B2120;
					font-size: 40rpx;
					font-weight: bold;
				}
				image{
					width: 36rpx;
					height: 36rpx;
					margin:0 16rpx;
				}
				text{
					color: #5C5E5E;
					font-size: 24rpx;
					background: #FFFFFF;
					padding: 8rpx 12rpx;
					border-radius: 8rpx;
					border: 2rpx solid #CACCCC;
				}
			}
			.identity_studio{
				color: #5C5E5E;
				font-size: 26rpx;
				margin-right: 8rpx;
				margin-top: 16rpx;
			}
		}
		.jianjie{
			color: #7C807F;
			font-size: 26rpx;
			line-height: 48rpx;
			margin-top:46rpx;
			image{
				width: 60rpx;
				height: 36rpx;
				vertical-align: middle;
				margin-right: 12rpx;
			}
			text{
				word-break:break-all;
				word-wrap:break-word;
			}
		}
		.img_list {
			@include flex(center);
			margin-top: 16rpx;
			image{
				width: 75px;
				height: 75px;
				margin-right: 8rpx;
				border-radius: 6px 6px 6px 6px;
				&:last-child{
					margin: 0;
				}
			}
			
		}
	}
}
.team {
	width: 100%;
	padding: 0 32rpx;
	margin-top: 48rpx;
	box-sizing: border-box;
	.team_title {
		@include flex(center, space-between);
		.name {
			font-weight: bold;
			font-size: 40rpx;
			color: #202020;
			text {
				color: #8e8c8c;
				font-size: 28rpx;
				font-weight: 400;
			}
		}
		.seeTo {
			color: #202020;
			font-size: 14px;
			@include flex(center);
			text {
				margin-left: 1rpx;
			}
		}
	}
	.team_scroll {
		width: 100%;
		width: 100%;
		white-space: nowrap;
		margin-top: 32rpx;
		@include flex(center);
		.team_item {
			// @include flex(center);
			margin-right: 16rpx;
			display: inline-block;
			// background-color: #fff;
			image {
				width: 160rpx;
				height: 160rpx;
				background-color: #fff;
				border-radius: 24rpx 0 0 24rpx;
			}
			.team_item_content{
				@include flex(center);
				>view{
					width: 240rpx;
					height: 160rpx;
					box-sizing: border-box;
					padding: 30rpx 24rpx;
					background-color: #fff;
					border-radius: 0 24rpx 24rpx 0;
				}
			}
			.name {
				width: 100%;
				color: #1b2120;
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 40rpx;
				word-break: break-all;
				word-wrap: break-word;
			}
			.describe {
				font-weight: bold;
				font-size: 28rpx;
				color: #5C5E5E;
			}
		}
	}
}
.dailyService {
	padding-left: 32rpx;
	box-sizing: border-box;
	.team_title {
		padding-right: 32rpx;
		box-sizing: border-box;
	}
}
.dailyService_swiper {
	height: 540rpx;
	margin-top: 32rpx;
	position: relative;
	.dailyService_swiper_content{
		height: 504rpx;
	}
	.dots{
		position: absolute;
		bottom: 0;left: 0;right: 0;
		margin: auto;
		@include flex(center,center);
		view{
			width: 8rpx;
			height: 8rpx;
			background: #CCCCCC;
			border-radius: 50%;
			margin-right: 4rpx;
			&:last-child{
				margin: 0;
			}
		}
		.active{
			width: 32rpx;
			background: #FF6084;
			border-radius: 200rpx;
		}
	}
	.swiper-item {
		width: 320rpx;
		height: 484rpx;
		padding-bottom: 40rpx;
		border-radius: 24rpx;
		background-color: #fff;
		box-sizing: border-box;
		image{
			width: 320rpx;
			height: 320rpx;
			border-radius: 24rpx 24rpx 0 0;
		}
		view{
			width: 320rpx;
			color: #1b2120;
			font-size: 30rpx;
			line-height: 40rpx;
			padding: 0 24rpx;
			margin-top: 32rpx;
			box-sizing: border-box;
		}
	}
}

.serviceEvaluation {
	.team_title {
		margin-bottom: 32rpx;
	}
}
.footer{
	position: fixed;
	bottom: 0;left: 0;
	width: 100vw;
	padding:8rpx 24rpx;
	padding-bottom: calc(var(--safe-area-bottom) + 4rpx);
	box-sizing: border-box;
	background-color: #ffffff;
	@include flex(center,space-between);
	view{
		width: 344rpx;
		height: 88rpx;
		color: #FF6084;
		font-size: 28rpx;
		border-radius: 44rpx;
		box-sizing: border-box;
		@include flex(center,center);
		border: 2rpx solid #FF6084;
		&:last-child{
			color: #FFFFFF;
			font-size: 28rpx;
			background: linear-gradient( 90deg, #FF6188 0%, #FF5252 100%);
		}
	}
}
::v-deep .loading-empty{
	>image{
		margin: 140rpx auto 30rpx !important;
	}
	>view{
		margin-bottom: 80rpx;
	}
}
.share{
	width: 132rpx;
	height: 64rpx;
	position: fixed;
	top: 16rpx;right: 0;
}
</style>
